<style lang="less">

</style>

<template>
  <div v-if="show">
    <WlForm v-if="previewVisible" :data="widgetForm" :remote="remoteFuncs" :value="widgetModels" ref="generateForm"></WlForm>
    <button @click="showData">显示数据</button>
  </div>
</template>

<script>
import WlForm from '_c/wl-form'
import formdata from '@/mock/data/form-data.js'
import { formBuild } from '@/api/common'
export default {
  components: {
    WlForm
  },
  data () {
    return {
      previewVisible: true,
      widgetForm: {},
      show: false,
      remoteFuncs: {
        func_test (resolve) {
          setTimeout(() => {
            const options = [
              { id: '1', name: '1111' },
              { id: '2', name: '2222' },
              { id: '3', name: '3333' }
            ]

            resolve(options)
          }, 2000)
        },
        funcGetToken (resolve) {
          request.get('http://tools-server.xiaoyaoji.cn/api/uptoken').then(res => {
            resolve(res.uptoken)
          })
        }
      },
      widgetModels: {}
    }
  },
  methods: {
    showData () {
      this.$refs.generateForm.getData().then(data => {
        this.$alert(data, '').catch(e => {})
        this.$refs.widgetPreview.end()
      }).catch(e => {
        this.$refs.widgetPreview.end()
        console.log('---111---111--1')
      })
    }
  },
  mounted () {
    let _this = this
    formBuild().then(ret => {
      // _this.widgetForm = ret.data
      _this.widgetForm = formdata
      _this.show = true
    })
  },
  watch: {
    widgetForm: {
      deep: true,
      handler: function (val) {
        console.log(this.$refs.widgetForm, '表单数据')
      }
    }
  }
}
</script>

<style>

</style>
